<!--添加投票界面-->
<template>
  <div class="addVote-container">
    <el-tabs type="card"
    >
      <el-tab-pane label="添加投票">
        <el-form
            ref="form"
            :model="voteContainer"
            :rules="options.rules"
            label-position="left"
            label-width="160px"
            size="mini"
        >
          <el-form-item label="投票主题" prop="electionTitle">
            <el-input v-model="voteContainer.electionTitle" props="title"/>
          </el-form-item>

          <el-form-item
              v-for="(option, index) in voteContainer.entitycontent"
              :key="index"
              :label="'选项' + (index + 1)"
          >
            <el-input v-model="option.electioncontentDisc" clearable>
              <el-button
                  v-if="index !== voteContainer.entitycontent.length - 1"
                  slot="append"
                  icon="el-icon-remove"
                  @click="removeOption(option)"
              />
              <el-button
                  v-else
                  slot="append"
                  icon="el-icon-plus"
                  @click="addOption(option)"
              />
            </el-input>
          </el-form-item>
          <el-form-item label="截至时间" prop="electionEnddate">
            <el-date-picker
                v-model="voteContainer.electionEnddate"
                placeholder="选择日期时间"
                type="datetime"
                value-format="yyyy-MM-dd-HH-mm"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="指定描述信息" prop="articlelink">
            <el-select v-model="voteContainer.articlelink" placeholder="请选择对应描述信息" clearable>
              <el-option
                  v-for="(item) in types"
                  :key="item.activitycontentId"
                  :label="item.activitycontentTitle"
                  :value="item.activitycontentId"
                  clearable
              >
                <span style="float: left">{{ item.activitycontentTitle }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.activitycontentDatetime }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit(`form`)"
            >立即创建
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane
      >
    </el-tabs
    >
  </div>
</template>

<script>
export default {
  data () {
    return {
      voteContainer: {
        electionTitle: "",
        electionEnddate: "",
        articlelink: "",
        entitycontent: [{
          candidate: 0,
          electioncontentDisc: "",
        },{
          candidate: 0,
          electioncontentDisc: "",
        }],
        electionType: "",
        managerId: 0,

      },
      entityId: "",
      types: [],
      options: {
        rules: {
          electionTitle: [
            {
              required: true,
              message: "请输入投票主题",
              trigger: "blur",
            },
          ],
          electionEnddate: [
            {
              required: true,
              message: "请输入截至日期",
              trigger: "blur",
            },
          ],
          articlelink: [
            {
              required: false,
              message: "请链接描述文章",
              trigger: "blur",
            },
          ],

        },
      },
    };
  },
  mounted () {
    this.handleGetPosterArticle();
  },
  methods: {
    async onSubmit (formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid);
        if (!valid) return null;
        this.toSubmit();
      });
    },
    async toSubmit () {
      const g = this.voteContainer;
      if (g.entitycontent.length < 2) return this.$message.warning("选项数至少大于2");

      const params = {
        electionEntity: {
          electionEnddate: g.electionEnddate,
          electionTitle: g.electionTitle,
          electionType: g.electionType,
          articlelink: g.articlelink,
        },
        entitycontent: g.entitycontent,
      };
      const res = await this.$http.electionRelease(params);
      if (!res) return this.$message.warning("发布失败");
      this.$router.go(0);
    },
    removeOption (item) {
      if (this.voteContainer.entitycontent.length <= 1) return;
      const index = this.voteContainer.entitycontent.indexOf(item);
      if (index !== -1) {
        this.voteContainer.entitycontent.splice(index, 1);
      }
    },
    addOption (currentInfo) {
      // console.log(this.voteContainer.options);
      console.log(`currentInfo-->`, currentInfo);
      if (currentInfo["electioncontentDisc"].trim() === "") {
        return this.$message.warning("请不要留下空白！🤯");
      }
      this.voteContainer.entitycontent.push({
        candidate: this.voteContainer.entitycontent.length,
        electioncontentDisc: null,
      });
    },
    async handleGetPosterArticle () {
      let res = await this.$http.activityContentGet({
        pageNum: 1,
        pageSize: 9999,
      });
      this.types = res.data.list;
      // console.log(res)
    },

  },

};
</script>

<style scoped>
</style>
